// 定义食物类 Food
class Food {
  // 定义一个属性表示食物所对应的元素
  element: HTMLElement

  constructor() {
    // 获取页面中的 food 元素，并将其赋值给 element
    // ! 表示没问题，不用担心
    this.element = document.getElementById('food')!
    // this.element = document.querySelector('#food')! // 会报错
    this.change()
  }

  // 定义一个获取食物 X 轴坐标的方法
  get X() {
    return this.element.offsetLeft
  }

  // 定义一个获取食物 Y 轴坐标的方法
  get Y() {
    return this.element.offsetTop
  }

  // 修改食物的位置
  change() {
    // 生成一个随机的位置
    // 蛇移动一次就是一格，一格的大小就是10，所以就要求食物的坐标必须是整10
    // 食物的位置范围 [0, 290] 且为 10 的整数倍    
    // Math.floor(Math.random() * 30) * 10 // 向下取整
    let top = Math.round(Math.random() * 29) * 10 // 四舍五入
    let left = Math.round(Math.random() * 29) * 10 // 四舍五入
    this.element.style.left = left + 'px'
    this.element.style.top = top + 'px'
  }
}

// 测试代码
// const food = new Food()
// console.log(food.X, food.Y)
// food.change()
// console.log(food.X, food.Y)

export default Food
